<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>个人blog(寒假练习)</title>
	</head>
	<style>
	*{
		margin: 0;
		list-style: none;
	}
	body{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.biaoti{
		width: 100%;
		display: flex;
		justify-content: center;
		font-size: 30px;
		font-weight: 1000;
		background-color: blue;
	}
	ul{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		width: 40%;
		height: 50%;
	}
	li{
		margin: 20px;
		width: 150px;
		height: 150px;
		/* background-color: red; */
		display: flex;
		justify-content: center;
		align-items: center;
	}
	li:hover{
		background-color: rgba(255, 0, 255, 0.3);
	}
	</style>
	<body>
		<div class="biaoti">
		<span>寒假个人博客</span>
		
		</div>
		<ul>
			<li><a href="index1.html">练习1</a></li>
			<li><a href="index2.html">练习2</a></li>
			<li><a href="index3.html">练习3</a></li>
			<li><a href="index4.html">练习4</a></li>
			<li><a href="index5.html">练习5</a></li>
			<li><a href="index6.html">练习6</a></li>
			
		</ul>
	</body>
</html>
